<template>
  <div class="app">
    <h2>我是App组件</h2>
    <h3 v-show="toy">我儿子给的玩具是：{{toy}}</h3>
    <h3 v-show="computer">我儿子给的电脑是：{{computer}}</h3>
    <Child @send-toy="getToy" @send-computer="getComputer" @click.native="handleClick"/>
  </div>
</template>

<script>
    import Child from './components/Child.vue'

    export default {
        name:'App',
        components:{Child},
        data() {
          return {
            toy:'',
            computer:''
          }
        },
        methods: {
          getToy(value){
            this.toy = value
          },
          getComputer(value){
            this.computer = value
          },
          handleClick(value){
            console.log('App---handleClick',value)
          }
        },
    }
</script>

<style>
    .app {
        background-color: gray;
        padding: 20px;
    }
</style>